<template>
  <div>
    <common-card title="累计订单量" value="1,001,000">
      <template>
        <v-chart :options="getOptions()" />
      </template>
      <template v-slot:footer>
        <span>昨日订单量</span>
        <span class="emphasize">123,000</span>
      </template>
    </common-card>
  </div>
</template>
<script>
import CommonCardMixin from "@/mixins/commonCardMixin";

export default {
  mixins: [CommonCardMixin],
  methods: {
    getOptions() {
      return {
        xAxis: {
          show: false,
          type: "category",
          boundaryGap: false // x轴两边不留空
        },
        yAxis: {
          show: false
        },
        series: [
          {
            type: "line",
            data: [
              220,
              330,
              190,
              280,
              133,
              234,
              222,
              567,
              134,
              400,
              499,
              200,
              119,
              467
            ],
            areaStyle: { color: "purple" },
            smooth: true, //更平滑显示
            lineStyle: { width: 0 }, // 线不显示
            itemSytle: { opacity: 0, borderWidth: 0 } // 点不显示,修改透明度
          }
        ],
        grid: { top: 0, bottom: 0, left: 0, right: 0 } // 图形撑满
      };
    }
  }
};
</script>
